<main role="main" class="container">
    <div class="rounded p-3 my-3">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="用户名/邮箱/角色" id="user-list-search">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button">搜索</button>
                <button class="btn btn-info" type="button" data-toggle="modal" data-target="#myModal">添加用户</button>

            </div>
        </div>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">添加用户</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="username">用户名</label>
                            <input type="text" class="form-control" id="username" required>
                        </div>
                        <div class="mb-3">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" id="password" required>
                        </div>

                        <div class="mb-3">
                            <label for="email">邮箱</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="country">角色</label>
                            <select class="custom-select d-block w-100" id="country" required>
                                <option value="">普通用户</option>
                                <option value="">管理员</option>
                            </select>
                        </div>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">确认添加</button>
                    </div>

                </div>
            </div>
        </div>
        <div class="my-3 p-3 bg-white box-shadow table-responsive" id="user-list-container">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="user : ${userList}">
                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.email}</td>
                    <td>
                        <a href="#"><img src="../../../static/assets/images/edit.png" th:src="@{assets/images/edit.png}"
                                         width="20px"
                                         height="20px"></a>
                        <a href="#"><img src="../../../static/assets/images/delete.png"
                                         th:src="@{assets/images/delete.png}" width="20px"
                                         height="20px"></a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div th:replace="~{fragments/page :: page}">...</div>

        </div>
    </div>
</main>